<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="btn1">点击保存cookie</button>
  <button class="btn2">点击我获取cookie</button>
  <script>
    // 一、存cookie的时候可以手动修改path路径，如果不更改就默认是当前路径
    document.querySelector(".btn1").onclick = function () {
      // 手动设置path路径
      document.cookie = "username=hello;Max-Age=3600;path=/";
    }
    // 二、获取cookie，路径需要和存的时候一样，或者比存的路径小。
    document.querySelector(".btn2").onclick = function () {
      console.log(document.cookie);
    }
  </script>
</body>

</html>